<template>
    <div class="contop">
        <el-container class="containertop">
            <el-main :style="{width:' 900px',height:'550px' }">
                <img :style="{width:' 900px',height:'500px' }"
                    src="https://rs.dance365.com/photo/7a36725553b85ff64fd575d12fcc80f3.jpg" alt="">
            </el-main>
            <el-aside width="320px">
                <div class="infinite-list-wrapper" style="overflow: auto">
                    <ul class="list">
                        <li class="ulli-item">
                            <div class="ulli-itemn">
                                <img :style="{width:' 142px',height:'80px' }"
                                    src="https://rs.dance365.com/photo/7a36725553b85ff64fd575d12fcc80f3.jpg" alt="">
                                <span>样式样式样式样式样式式样式样式样式样式样式样式样式样式样式样式样式</span>
                            </div>
                        </li>
                        <li class="ulli-item">
                            <div class="ulli-itemn">
                                <img :style="{width:' 142px',height:'80px' }"
                                    src="https://rs.dance365.com/photo/7a36725553b85ff64fd575d12fcc80f3.jpg" alt="">
                                <span>样式样式样式样式样式式样式样式样式样式样式样式样式样式样式样式样式</span>
                            </div>
                        </li>
                        <li class="ulli-item">
                            <div class="ulli-itemn">
                                <img :style="{width:' 142px',height:'80px' }"
                                    src="https://rs.dance365.com/photo/7a36725553b85ff64fd575d12fcc80f3.jpg" alt="">
                                <span>样式样式样式样式样式式样式样式样式样式样式样式样式样式样式样式样式</span>
                            </div>
                        </li>
                        <li class="ulli-item">
                            <div class="ulli-itemn">
                                <img :style="{width:' 142px',height:'80px' }"
                                    src="https://rs.dance365.com/photo/7a36725553b85ff64fd575d12fcc80f3.jpg" alt="">
                                <span>样式样式样式样式样式式样式样式样式样式样式样式样式样式样式样式样式</span>
                            </div>
                        </li>
                        <li class="ulli-item">
                            <div class="ulli-itemn">
                                <img :style="{width:' 142px',height:'80px' }"
                                    src="https://rs.dance365.com/photo/7a36725553b85ff64fd575d12fcc80f3.jpg" alt="">
                                <span>样式样式样式样式样式式样式样式样式样式样式样式样式样式样式样式样式</span>
                            </div>
                        </li>
                        <li class="ulli-item">
                            <div class="ulli-itemn">
                                <img :style="{width:' 142px',height:'80px' }"
                                    src="https://rs.dance365.com/photo/7a36725553b85ff64fd575d12fcc80f3.jpg" alt="">
                                <span>样式样式样式样式样式式样式样式样式样式样式样式样式样式样式样式样式</span>
                            </div>
                        </li>
                        <li class="ulli-item">
                            <div class="ulli-itemn">
                                <img :style="{width:' 142px',height:'80px' }"
                                    src="https://rs.dance365.com/photo/7a36725553b85ff64fd575d12fcc80f3.jpg" alt="">
                                <span>样式样式样式样式样式式样式样式样式样式样式样式样式样式样式样式样式</span>
                            </div>
                        </li>
                        <li class="ulli-item">
                            <div class="ulli-itemn">
                                <img :style="{width:' 142px',height:'80px' }"
                                    src="https://rs.dance365.com/photo/7a36725553b85ff64fd575d12fcc80f3.jpg" alt="">
                                <span>样式样式样式样式样式式样式样式样式样式样式样式样式样式样式样式样式</span>
                            </div>
                        </li>
                        <li class="ulli-item">
                            <div class="ulli-itemn">
                                <img :style="{width:' 142px',height:'80px' }"
                                    src="https://rs.dance365.com/photo/7a36725553b85ff64fd575d12fcc80f3.jpg" alt="">
                                <span>样式样式样式样式样式式样式样式样式样式样式样式样式样式样式样式样式</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-aside>
        </el-container>
        <div class="contact">
            <div class="contact-top">
                <div>播放</div>
                <div>点赞</div>
                <div>收藏</div>
            </div>
            <div class="contact-bot">
                <div class="contact-left">
                    <p>标题</p>
                    <div class="contact-left-bot">
                        <div>
                            <span>作者</span>
                        </div>
                        <div>
                            <span>
                                发布时间
                            </span>
                        </div>
                    </div>
                </div>
                <div class="contact-right">
                    <div class="contact-right-le">
                        <div class="contact-right-le1">价格</div>
                        <div class="contact-right-le2">开通会员,本课程免费学</div>
                        <div class="contact-right-le3">已有?人购买</div>
                    </div>
                    <div class="contact-right-bo">
                        购买学习
                    </div>
                </div>
            </div>
        </div>
    </div>

    <el-card shadow="always" :body-style="{ padding: '50px' }">
        <el-tabs v-model="activeName" class="demo-tabs"  @tab-click="handleClick">
            <el-tab-pane :style="{fontSize:'50px'}" label="课程介绍" name="first">课程介绍</el-tab-pane>
            <el-tab-pane label="评价" name="second">评价</el-tab-pane>
            <el-tab-pane label="购买售后" name="third">购买售后</el-tab-pane>
        </el-tabs>
    </el-card>

</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Videodetail",

});
</script>

<script setup lang="ts">
import { computed, ref } from 'vue'

import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log('?',tab, event)
}

</script>

<style lang="less" scoped>
/deep/.el-tabs{
.el-tabs__item{
font-size:24px;
}
}
.contop {
    background-color: #434343;
}

.infinite-list-wrapper {
    height: 550px;
    text-align: center;
}

.infinite-list-wrapper .list {
    padding: 0;
    margin-top: 20px;
    width: 100%;
    height: 100%;
    list-style: none;
}

.ulli-item {
    width: 300px;
    height: 120px;

    .ulli-itemn {
        display: flex;

        img {
            float: left;
        }

        span {
            float: left;
        }
    }
}
/* .demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
} */
.demo-tabs{
    color: #6b778c;
  font-size: 32px;
}
.contact {
    color: #fff;
    margin: 0 20px;

    .contact-top {
        display: flex;

        div {
            margin-right: 40px;
        }
    }

    .contact-bot {
        display: flex;
        justify-content: space-between;

        .contact-left {
            p {
                color: rgb(230, 181, 181);
                font-size: 20px;
                margin: 0;
                padding-top: 23px;
                padding-right: 550px;
            }

            .contact-left-bot {
                margin-top: 40px;
                display: flex;

                div {
                    margin-right: 80px;
                }
            }
        }

        .contact-right {
            display: flex;

            .contact-right-le {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;

                .contact-right-le1 {
                    color: #f93684;
                    font-size: 32px;
                    font-weight: 700;
                    margin-bottom: 6px;
                }

                .contact-right-le2 {}

                .contact-right-le3 {
                    color: #b1b5c1;
                    font-size: 16px;
                }
            }

            .contact-right-bo {
                background: #f93684;
                width: 134px;
                height: 134px;
                line-height: 134px;
                border-radius: 0;
                font-size: 28px;
                text-align: center;
                white-space: normal;
                font-weight: 700;
                color: #fff;
            }
        }
    }
}
</style>